<template>
  <div class="month-picker__container">
  <el-select v-model="model" placeholder="请输入用户名" clearable filterable remote :remote-method="queryUserByName"  :loading="loading">
    <el-option v-for="item in userOptions" :key="item.id" :label="item.label" :value="item.id"></el-option>
  </el-select>
  </div>
</template>

<script>
import {listUserLikeName} from "@/api/selfcom/user";
import { ElSelect, ElOption } from 'element-ui';
import languages from "@/views/components/wowmonthpicker/src/languages";

export default {
    name: 'UserSelector',
    components: {
      ElSelect,
      ElOption
    },
    props: {
      model: {
        type: String,
        default: 'queryParams.userId',
        required: false,
      },
    },
    data() {
      return {
        userOptions: []
      };
    },
    computed: {

    },
    watch: {

    },
    mounted() {

    },
    methods: {
      queryUserByName(userName) {
        listUserLikeName(userName).then(response => {
          this.userOptions = response.rows;
        });
      }
    },
}
</script>

<style scoped>
.month-picker__container {
  width: 200px;
  position: relative;
  //box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1),
  //    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  z-index: 10;
}
</style>
